<template>
	<view class="content">
		<view class="home-page">
			<c-lottie ref="cLottieRefHome" :data='animationData' :speed="1" @LoopComplete="onLoopComplete" width="750rpx"
				height='750rpx' :loop="true" v-if="active"></c-lottie>
		</view>
	<!-- 	<view class="home-icon" id="home-icon" @click="selectTab">
			<canvas id="lottie_demo" type="2d" style="width: 44px; height: 44px;" />
			<image src="../../static/images/shouye0@3x.png" mode=""
				style="display: inline-block; width: 44px; height: 44px;" v-if="!active"></image>
			<c-lottie ref="cLottieRef" :data='animationData' :speed="2" @LoopComplete="onLoopComplete" width="88rpx"
				height='88rpx' :loop="false" v-if="active"></c-lottie>
		</view> -->
		<!-- <view class="container">
			<button @tap="initAnimation('#lottie_demo')" style="width: 300px;">初始化</button>
			<button @tap="play" style="width: 300px;">播放</button>
			<button @tap="pause" style="width: 300px;">暂停</button>
		</view> -->
		<CustomTabbar ref="customTabbar" :list="tabbar" :current="0" height="74px" :icon-size="60" :mid-button="false"></CustomTabbar>
	</view>
</template>

<script>
	import CustomTabbar from "../../components/u-tabbar/u-tabbar.vue"
	import {
		tabbar
	} from "../../utils/tabbar.js"
	import lottie from 'lottie-miniprogram';
	let ani = null
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				tabbar,
				title: 'Hello uView',
				inited: false,
				active: false,
				animationData: require("../../static/json/Animation-home-page2.json"),
			}
		},
		onLoad() {

		},
		onShow() {
			this.active=true
		},
		onHide() {
			this.active=false
		},
		onUnload(){
			this.active=false
		},
		onReady() {
			// this.initAnimation("#lottie_demo")
			// setTimeout(()=>{
			// 	console.log("goToAndPlay");
			// 	this.$refs.cLottieRef.call('goToAndPlay',0,false)
			// },3000)
		},
		methods: {
			onLoopComplete(e) {
				console.log("onLoopComplete", e);
			},
			selectTab() {
				this.active = !this.active
				if (this.active) {
					// this.$nextTick(() => {
					// 	this.initAnimation("#lottie_demo")
					// })
				} else {
					// ani.destroy()
					// this.inited = false;
				}
			},
			initAnimation(select) {
				if (this.inited) {
					ani.goToAndPlay(0, false)
					return;
				}
				this.createSelectorQuery()
					.select(select)
					.node(res => {
						console.log(res); // 节点对应的 Canvas 实例。
						const canvas = res.node;
						const context = canvas.getContext('2d');
						canvas.width = 44;
						canvas.height = 44;
						lottie.setup(canvas);
						ani = lottie.loadAnimation({
							loop: false,
							autoplay: true,
							animationData: this.animationData,
							rendererSettings: {
								context
							}
						});
						ani.setSpeed(2)
						this.inited = true;
					})
					.exec();
			},
			play() {
				ani.play();
			},
			pause() {
				ani.pause();
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.home-page{
		width: 100%;
		height: 750rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.lottie_demo {
		display: none;
	}

	.active {
		display: inline-block;
	}

	.home-icon {
		width: 44px;
		height: 44px;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>